<template>
  <a-upload v-model:file-list="fileList" name="avatar" list-type="picture-card" class="avatar-uploader"
    :show-upload-list="false" action="http://127.0.0.1:8080/doctor/user/uploadAvatar" :before-upload="beforeUpload"
    @change="handleChange">
    <a-tooltip placement="bottom">
      <template #title>
        <span>点击修改头像</span>
      </template>
      <img v-if="imageUrl" :src="imageUrl" alt="avatar" style="width: 100%;height: 100%;" />
      <div v-else>
        <loading-outlined v-if="loading"></loading-outlined>
        <plus-outlined v-else></plus-outlined>
        <div class="ant-upload-text"></div>
      </div>
    </a-tooltip>
  </a-upload>
</template>
<script lang="ts">
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import { defineComponent, ref } from 'vue';
import type { UploadChangeParam, UploadProps } from 'ant-design-vue';
import axios from 'axios';

function getBase64(img: Blob, callback: (base64Url: string) => void) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result as string));
  reader.readAsDataURL(img);
}
export default defineComponent({
  components: {
    LoadingOutlined,
    PlusOutlined,
  },
  setup() {
    const fileList = ref([]);
    const loading = ref<boolean>(false);
    const imageUrl = ref<string>('https://blog-avatar.oss-cn-hangzhou.aliyuncs.com/Avatar_360245163785850880');

    const handleChange = (info: UploadChangeParam) => {
      if (info.file.status === 'uploading') {
        loading.value = true;
        return;
      }
      if (info.file.status === 'done') {
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, (base64Url: string) => {
          imageUrl.value = base64Url;
          loading.value = false;
        });
      }
      if (info.file.status === 'error') {
        loading.value = false;
        message.error('upload error');
      }
    };

    const beforeUpload = (file: File) => {
      const formData = new FormData();
      formData.append('file', file);
      axios.post("http://127.0.0.1:8080/doctor/user/uploadAvatar",formData,{
        headers: { 'Content-Type': 'multipart/form-data' }
      }).then(res => {
        console.log(res);

      })

}
      // const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
      // if (!isJpgOrPng) {
      //   message.error('You can only upload JPG file!');
      // }
      // const isLt2M = file.size / 1024 / 1024 < 2;
      // if (!isLt2M) {
      //   message.error('Image must smaller than 2MB!');
      // }
      // return isJpgOrPng && isLt2M;
    // };

    return {
      fileList,
      loading,
      imageUrl,
      handleChange,
      beforeUpload,
    };
  },
});
</script>
<style>
.avatar-uploader>.ant-upload {
  /*改头像的大小 */
  width: 100px;
  height: 100px;
  overflow: hidden;
  border: none;

}

.avatar-uploader {
  width: max-content;
}

.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>